<template>
	<z-paging
		show-refresher-when-reload
		class="app app-bg"
		v-model="list"
		ref="paging"
		@query="queryList"
	>
		<view class="title" slot="top">
			<image
				src="@/static/icon/icon_back.png"
				class="icon"
				@tap="vk.navigateBack()"
			></image>
			<text>消息通知</text>
			<text class="text" @tap="readAll">全部已读</text>
		</view>
		<block v-for="item in list" :key="item._id">
			<view class="top" @tap="check(item)">
				<view class="main">
					<text class="left">系统消息</text>
					<text>{{ vk.pubfn.timeFormat(item._add_time, "yyyy-MM-dd hh:mm") }}</text>
					<view class="tip" v-if="read.indexOf(item._id) === -1"></view>
				</view>
				<text class="tips">{{ item.title }}</text>
			</view>
			<view class="end" @tap="check(item)">
				<text>点击查看详情</text>
				<u-icon size="10" name="arrow-right"></u-icon>
			</view>
		</block>
	</z-paging>
</template>

<script>
var vk = uni.vk // vk依赖

export default {
	data() {
		return {
			list: [],
			read: []
		}
	},
	onLoad() {
		let arr = vk.getStorageSync("read")
		this.read = arr || []
	},
	methods: {
		// 查询列表
		queryList(pageIndex, pageSize) {
			vk.callFunction({
				url: "client/user.queryNoticeList",
				data: { pageSize, pageIndex }
			}).then(res => {
				this.$refs.paging.complete(res.rows)
			})
		},
		// 查看详情
		check(item) {
			vk.navigateTo(`./detail?_id=${item._id}`)
			this.$nextTick(() => {
				if (this.read.indexOf(item._id) === -1) {
					this.read.push(item._id)
					vk.setStorageSync("read", this.read)
				}
			})
		},
		// 全部已读
		readAll() {
			let arr = this.list.map(item => item._id)
			this.read = [...new Set([...this.read, ...arr])]
			vk.setStorageSync("read", this.read)
		}
	}
}
</script>

<style lang="scss" scoped>
.title {
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 32rpx;
	position: relative;
	padding: calc(24rpx + var(--status-bar-height)) 0 24rpx;
	.icon {
		width: 28rpx;
		height: 40rpx;
		position: absolute;
		left: 20rpx;
		transform: translate(0, -2rpx);
	}
	.text {
		position: absolute;
		right: 20rpx;
		font-size: 28rpx;
		color: #3ab54a;
	}
}

.top {
	padding: 20rpx;
	border-bottom: 2rpx solid #dedede;
	margin: 20rpx 20rpx 0;
	background-color: #ffffff;
	border-radius: 12rpx 12rpx 0 0;
	.main {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #999999;
		padding-bottom: 28rpx;
		position: relative;
		.left {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
		}
		.tip {
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #fa3534;
			position: absolute;
			top: -10rpx;
			right: -10rpx;
		}
	}
	.tips {
		font-size: 24rpx;
		color: #666666;
	}
}
.end {
	padding: 20rpx 12rpx 20rpx 20rpx;
	margin: 0 20rpx 20rpx;
	background-color: #ffffff;
	border-radius: 0 0 12rpx 12rpx;
	font-size: 24rpx;
	color: #666666;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.icon {
		width: 10rpx;
		height: 20rpx;
	}
}
</style>
